import "./detailsvideo.css"
import React, { useRef } from 'react';
import { Tabs,Toast } from 'antd-mobile'
import { getDetails, getDetailsFood, getDetailsNous, getDetailsSense, getDetailsMaterial } from "../../api/home"
import { Link, useParams, useNavigate, useLocation } from "react-router-dom"
// import { Sticky, StickyContainer } from 'react-sticky'

function Detailsvideo() {
    let params = useParams(); //获取链接数据
    let navigate = useNavigate();//链接跳转

    let [detailsFood, setDetailsFood] = React.useState(null);
    let [detailsvideoA, setDetailsVideoA] = React.useState(null);
    let [detailsVideoB, setDetailsVideoB] = React.useState(null);
    let [Video, EditVideo] = React.useState(null);
    let [likeList, setLikeList] = React.useState(null);

    let [Classindex, editClass] = React.useState(1)

    let [detailsNous, setDetailsNous] = React.useState(null);


    let [detailsSense, setDetailsSense] = React.useState(null);

    let [detailsMaterial, setDetailsMaterial] = React.useState(null);

    // 收藏
    let [collectlist, SetCollect] = React.useState([])

    let [collectflag, EditCollect] = React.useState(true)

    // 菜篮子
    let [distlist, SetDist] = React.useState([])

    let [distflag, EditDist] = React.useState(true)

    let [index, Editindex] = React.useState('one')



    React.useEffect(() => {
        let arr = JSON.parse(localStorage.getItem("collect"))
        let arrs = JSON.parse(localStorage.getItem("dist"))
        SetCollect(arr)
        SetDist(arrs)
        // console.log(params);
        // 所有详情
        getDataAll(params.id)
        // 配料
        getDetails(params.id).then(data => {
            arr.map(item => {
                if (item.dashes_id == data.data.dashes_id) {
                    EditCollect(false)

                }
            })
            arrs.map(item => {
                if (item.dashes_id == data.data.dashes_id) {
                    EditDist(false)

                }
            })
        })

    }, [])

    const pageView = useRef(null);

    // 收藏
    const collect = () => {
        let login = window.localStorage.getItem("token")
        if(!login){
            Toast.show('请先登录')
            navigate('/loginpass')
        }else{
            EditCollect(false)
            collectlist.push(detailsFood)
            SetCollect(collectlist)
            localStorage.setItem("collect", JSON.stringify(collectlist))
        }
        
    }
    // 取消收藏
    const clearcollect = () => {
        EditCollect(true)
        collectlist = collectlist.filter(item => {
            return item.dashes_id != detailsFood.dashes_id
        })
        SetCollect(collectlist)

        localStorage.setItem("collect", JSON.stringify(collectlist))

    }
    // 加入菜篮子
    const addDist = () => {
        let login = window.localStorage.getItem("token")
        if(!login){
            Toast.show('请先登录')
            navigate('/loginpass')
        }else{
            EditDist(false)
            detailsMaterial = Object.assign({}, detailsMaterial, {
                dashes_id: detailsFood.dashes_id,
                image: detailsFood.image,
                dashes_name: detailsFood.dashes_name
    
            });
            distlist.push(detailsMaterial)
            SetDist(distlist)
    
            localStorage.setItem("dist", JSON.stringify(distlist))
        }


    }
    // 移出菜篮子
    const clearDist = () => {
        EditDist(true)
        distlist = distlist.filter(item => {
            return item.dashes_id != detailsFood.dashes_id
        })
        SetDist(distlist)
        localStorage.setItem("dist", JSON.stringify(distlist))

    }
    // 推荐切换
    const changeId = (id, e) => {
        Editindex("one")
        // 收藏判断
        collectlist.map(item => {
            if (item.dashes_id == detailsFood.dashes_id) {
                EditCollect(false)

            } else {

                EditCollect(true)

            }
        })
        // 菜篮子判断
        distlist.map(item => {
            if (item.dashes_id == detailsFood.dashes_id) {
                EditDist(false)

            } else {

                EditDist(true)

            }
        })
        pageView.current.scrollTop = 0;

        e.preventDefault();
        getDataAll(id);
    }

    // 上一集
    const prevVideo = () => {
        editClass(1)
        EditVideo(detailsvideoA)
    }

    // 下一集
    const nextVideo = () => {
        editClass(2)
        EditVideo(detailsVideoB)

    }


    const getDataAll = (id) => {
        // 视频 做法
        getDetails(id).then(data => {
            console.log(data.data);
            setDetailsFood(data.data)
            setDetailsVideoA(data.data.material_video)
            setDetailsVideoB(data.data.process_video)
            EditVideo(data.data.material_video)
        })
        // 猜你喜欢
        getDetailsFood(id).then(data => {
            setLikeList(data.data.data)
        })

        // 相克相宜
        getDetailsNous(id).then(data => {
            setDetailsNous(data.data.material)
        })

        // 相关常识
        getDetailsSense(id).then(data => {
            setDetailsSense(data.data)
        })

        // 配料
        getDetailsMaterial(id).then(data => {
            console.log(data.data);
            setDetailsMaterial(data.data)
        })
    }
    return detailsFood && detailsNous && detailsSense ? (
        <>
            <div className="detailsvideo" ref={pageView} style={{ height: '100vh', overflow: "scroll" }}>
                <div className="header">

                    <div className="header-wrap">
                        <i onClick={() => navigate(-1)} className="iconfont icon-zuobian"></i>
                        <div className="title">
                            {detailsFood.dashes_name}
                        </div>
                        {
                            collectflag ? (<img src="../../assets/img/icon_main_collection.png" onClick={collect}></img>) : (<img src="../../assets/img/icon_main_collection_sel.png" onClick={clearcollect}></img>)
                        }

                    </div>

                </div>

                {/* 视频 */}
                <div className="video">
                    <video src={Video} autoPlay muted controls></video>
                </div>

                {/* 食物详细介绍 */}
                <div className="dishes-wrap">
                    <div className="video-bar">
                        <div className="box">
                            <div className="cell">
                                <div className={`icons ${Classindex == 1 ? 'active' : ""}`} onClick={prevVideo}>
                                    <i className="icon"></i>
                                    食材准备
                                    <span>（上集）</span>
                                </div>
                            </div>

                        </div>
                        <div className="box">
                            <div className="cell">
                                <div className={`icons ${Classindex == 2 ? 'active' : ""}`} onClick={nextVideo}>
                                    <i className="icon"></i>
                                    详细步骤
                                    <span>（下集）</span>
                                </div>
                            </div>

                        </div>
                    </div>
                    <div className="video-title">
                        <div className="goods-show">
                            <div className="goods-desc">
                                <h5>{detailsFood.dashes_name}</h5>
                                <div className="label-bar">
                                    <i className="iconfont icon-w_biaoqian-"></i>
                                    <ul>
                                        {
                                            detailsFood.tags_info.map(data => {
                                                return (
                                                    <li key={data.id}>{data.text
                                                    }</li>
                                                )
                                            })
                                        }

                                    </ul>
                                </div>
                                <p>{detailsFood.material_desc}</p>
                            </div>

                        </div>
                        <div className="goods-show-bar">
                            <ul>
                                <li>
                                    <i className="ico ico-cook"></i>
                                    <span>难度：{detailsFood.hard_level}</span>
                                </li>
                                <li>
                                    <i className="ico ico-time"></i>
                                    <span>烹饪时间：{detailsFood.cooking_time}</span>
                                </li>
                                <li>
                                    <i className="ico ico-taste"></i>
                                    <span>口味：{detailsFood.taste}</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>

                {/* 食物tab栏 */}
                <div className="goods-detail product-box">
                    <div className="nav-height">
                        <div className="nav-box">
                            <Tabs
                                activeKey={index}

                                style={{
                                    '--title-font-size': '13px',
                                    '--fixed-active-line-width': '50px'
                                }}
                                onChange={(key) => {
                                    Editindex(key)

                                }}
                            >
                                <Tabs.Tab title='做法' key='one'>
                                    <div className="cook-step-md">
                                        <ul>
                                            {
                                                detailsFood.step.map(item => {
                                                    return (
                                                        <li key={item.dishes_step_id}>
                                                            <img src={item.dishes_step_image} />
                                                            <div className="tips">
                                                                <span className="num">{item.dishes_step_order}.</span>
                                                                {item.dishes_step_desc}
                                                            </div>
                                                        </li>
                                                    )
                                                })
                                            }
                                        </ul>
                                    </div>
                                </Tabs.Tab>
                                <Tabs.Tab title='食材' key='two'>
                                    <div className="section-content">

                                        <div className="material-list">
                                            {
                                                detailsMaterial ? <img src={detailsMaterial.material_image} /> : ""
                                            }
                                            <ul>
                                                {
                                                    detailsMaterial && detailsMaterial.material.map(item => {
                                                        return (
                                                            <li key={item.material_id}>
                                                                <div>{item.material_name}</div>
                                                                <span>{item.material_weight}</span>
                                                            </li>
                                                        )
                                                    })
                                                }
                                                {
                                                    detailsMaterial && detailsMaterial.spices.map(item => {
                                                        return (
                                                            <li key={item.spices_id}>
                                                                <div>{item.title}</div>
                                                            </li>
                                                        )
                                                    })
                                                }
                                            </ul>
                                        </div>
                                        <div className="nd-top">
                                            <div className={`${distflag ? "lz" : "lz active"}`}>
                                                {
                                                    distflag ? (<div onClick={addDist}><i className="iconfont icon-a-ziyuan47"></i>
                                                        <span className="add-lz">加入菜篮子</span></div>) : (<div onClick={clearDist}><i className="iconfont icon-yichu"></i>
                                                            <span className="add-lz ">移出菜篮子</span></div>)
                                                }


                                            </div>
                                        </div>
                                    </div>
                                </Tabs.Tab>
                                <Tabs.Tab title='相关常识' key='three'>
                                    <div className="section-content">
                                        <div className="sense-md">
                                            <img src={detailsSense.image} />
                                            <div className="sense-list">
                                                <ul>
                                                    <li>
                                                        <h5>相关常识</h5>
                                                        <div className="text">
                                                            {detailsSense.nutrition_analysis}
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <h5>制作指导</h5>
                                                        <div className="text">
                                                            {detailsSense.production_direction}
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </Tabs.Tab>
                                <Tabs.Tab title='相宜相克' key='four'>
                                    <div className="section-content">
                                        <div className="suit-md">
                                            <div className="bg-white">
                                                <img src={detailsNous.image} />
                                            </div>
                                            <div className="suit-list">
                                                <ul>
                                                    <li>
                                                        <div className="hd">
                                                            与{detailsNous.material_name}搭配<span className="green">相宜</span>的食材
                                                        </div>
                                                        <div className="list">
                                                            {
                                                                detailsNous.suitable_with.map(item => {
                                                                    return (
                                                                        <div className="rows" key={item.material_id}>
                                                                            <img src={item.image} />
                                                                            <div className="text">
                                                                                <h5>{item.material_name}</h5>
                                                                                <span>{item.suitable_desc}</span>
                                                                            </div>
                                                                        </div>
                                                                    )
                                                                })
                                                            }

                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div className="hd">
                                                            与{detailsNous.material_name}搭配<span className="red">相克</span>的食材
                                                        </div>
                                                        <div className="list">
                                                            {
                                                                detailsNous.suitable_not_with.map(item => {
                                                                    return (
                                                                        <div className="rows" key={item.material_id}>
                                                                            <img src={item.image} />
                                                                            <div className="text">
                                                                                <h5>{item.material_name}</h5>
                                                                                <span>{item.suitable_desc}</span>
                                                                            </div>
                                                                        </div>
                                                                    )
                                                                })
                                                            }

                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>

                                        </div>
                                    </div>

                                </Tabs.Tab>
                            </Tabs>
                        </div>
                    </div>
                    {/* 评论 */}
                    <div className="commentBox">
                        <div className="heading">
                            <span>评论</span>
                        </div>
                        <div className="commentForm">
                            <img src="http://img.szzhangchu.com/1445429526387_9171386134.jpg" />
                            <div className="commentInput">
                                <div className="input-text">
                                    <input type="text" />
                                </div>
                            </div>
                            <div className="commentBtn">
                                发送
                            </div>
                        </div>
                        <div className="commentWrap">
                            <div className="comment-list">
                                <img src="https://vipvideo.szzhangchu.com/image/default/35B9503E6E6C4827A48974AD69B878C2-6-2.png" />
                                <div className="comment-content">
                                    <p className="nick">掌小厨</p>
                                    <p className="content">亲爱的厨友们，掌厨因业务调整，社区以及用户相关功能将陆续关停，感谢广大厨友长久以来的支持</p>
                                </div>
                            </div>

                        </div>
                    </div>
                    {/* 猜你喜欢 */}
                    <div className="likeBox">
                        <div className="heading"><span>猜你喜欢</span></div>
                        <div className="goods-page">
                            <div className="box">
                                <ul>
                                    {
                                        likeList && likeList.map(item => {
                                            return (
                                                <li key={item.id} onClick={changeId.bind(this, item.id)}>
                                                    <div className="img">
                                                        <img src={item.image} />
                                                        <i className="icon"></i>
                                                    </div>
                                                    <div className="text">

                                                        <h6>{item.title}</h6>
                                                        <span>{item.content}</span>
                                                        <div className="label-bar">
                                                            {
                                                                item.tags_info && item.tags_info.map(item => {
                                                                    return (
                                                                        <a href="" key={item.id}>
                                                                            <span>{item.text}</span>
                                                                        </a>
                                                                    )
                                                                })
                                                            }

                                                        </div>
                                                    </div>

                                                </li>
                                            )
                                        })
                                    }


                                </ul>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </>

    ) : null;
}

export default Detailsvideo;